<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qqZnk9ta0LpbYMtewsmW9Vf7bHoEeiFG"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="city.json"></script>
    <title>行政区域地图展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var cityName = decodeURIComponent(GetQueryString('name'));
    var city_arr = cities["江苏"][cityName];
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例

    // map.centerAndZoom(new BMap.Point(117.188107,34.271553), 13);
    map.setCurrentCity(cityName);
    map.disableDragging();//禁止拖动
    map.disableDoubleClickZoom();//禁止双击缩放

    getBoundaryWithMarker(cityName);
    // getBoundaryWithOutMarker("丰县","#fc0521","#fc0521");
    // getBoundaryWithOutMarker("沛县","#b25dea","#b25dea");
    // getBoundaryWithOutMarker("徐州开发区","#f4f9fc","#f4f9fc");
    // getBoundaryWithOutMarker("泉山区","#3f8443","#3f8443");
    // getBoundaryWithOutMarker("贾汪区","#e328ed","#e328ed");
    // getBoundaryWithOutMarker("徐州鼓楼区","#07f4fc","#07f4fc");
    // getBoundaryWithOutMarker("云龙区","#ff0008","#ff0008");
    // getBoundaryWithOutMarker("铜山区","#f4f9fc","#f4f9fc");
    // getBoundaryWithOutMarker("邳州市","#1203b7","#1203b7");
    // getBoundaryWithOutMarker("睢宁县","#91351b","#91351b");
    // getBoundaryWithOutMarker("新沂市","#f4f9fc","#f4f9fc");
    //画地图
    for(var i=0;i<city_arr.length;i++){
        var color = getColor();
        getBoundaryWithOutMarker(city_arr[i],color,color);
    }

    function getBoundaryWithMarker(name) {
        var pointArray = [];
         /*画遮蔽层的相关方法
        *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
        *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点，作为第一层
        var pNW = { lat: 59.0, lng: 73.0 }
        var pNE = { lat: 59.0, lng: 136.0 }
        var pSE = { lat: 3.0, lng: 136.0 }
        var pSW = { lat: 3.0, lng: 73.0 }
        //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
        var boundary = new BMap.Boundary();
        boundary.get(name, function(rs){
         //一个省可能有好几个闭合的多边形区域
        for (var i = 0; i < rs.boundaries.length; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 4, strokeColor: "#FF0000", fillOpacity: 0.01, fillColor: " #FFFFFF" });
            //建立多边形覆盖物
            map.addOverlay(ply);
              //将点增加到视野范围内
            var path = ply.getPath();
            pointArray = pointArray.concat(path);
            //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(path);
            pArray.push(pArray[0]);
        }
        //限定显示区域，需要引用api库
        var boundply = new BMap.Polygon(pointArray);
        BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
        map.setViewport(pointArray);    //调整视野

        //添加遮蔽层
        var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 0.9 }); //建立多边形覆盖物
        map.addOverlay(plyall);
        });
    }

    function getBoundaryWithOutMarker(name,strokeColor,fillColor) {
        var boundary = new BMap.Boundary();
        // var src = makeImage();
        boundary.get(name, function(rs){
            //一个省可能有好几个闭合的多边形区域
            var ply;
            for (var i = 0; i < rs.boundaries.length; i++) {
                ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 1, strokeColor: strokeColor, fillOpacity: 0.5, fillColor: fillColor });
                ply.addEventListener("click", click);
                ply.addEventListener("mouseover", mouseover);
                ply.addEventListener("mouseout", mouseout);
                ply.addEventListener("mousemove", mousemove);
                //建立多边形覆盖物
                map.addOverlay(ply);
            }
           //添加名称标签层
            var centerlabel = new BMap.Label(name, { offset: new BMap.Size(0, -20) });
            centerlabel.setPosition(ply.getBounds().getCenter());
            map.addOverlay(centerlabel);

            //添加企业柱形
            // var myCompOverlay = new ComplexCustomOverlay(getEllpisePosition(name));
            // myCompOverlay.show();
            // map.addOverlay(myCompOverlay);//将标注添加到地图中
        });
    }

    /**
     * 各种鼠标事件绑定
     */
    function click(evt) {
        evt.target.setFillOpacity(0.9);
    }

    function mouseover(evt) {
        evt.target.setFillOpacity(0.9);
    }

    function mousemove(evt) {
         evt.target.setFillOpacity(0.9);
    }

    function mouseout(evt) {
         evt.target.setFillOpacity(0.5);
    }

    function ComplexCustomOverlay(point){
      this._point = point;
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function(map){
      this._map = map;
      var div = this._div = document.createElement("div");
      div.style.position = "absolute";
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);//聚合功能?
      div.style.height = "45px";
      div.style.width="45px";

      /*var arrow = this._arrow = document.createElement("img");
      arrow.src = "img/2.jpg";
      arrow.style.width = "45px";
      arrow.style.height = "45px";
      arrow.style.top = "22px";
      arrow.style.left = "10px";
      div.appendChild(arrow);*/

      var arrow = this._arrow = document.createElement("div");
      arrow.className = "ellipse";
      // arrow.style.width = "45px";
      // arrow.style.height = "45px";
      // arrow.style.top = "22px";
      // arrow.style.left = "10px";
      div.appendChild(arrow);

      map.getPanes().labelPane.appendChild(div);//getPanes(),返回值:MapPane,返回地图覆盖物容器列表  labelPane呢???

      return div;
    }

    ComplexCustomOverlay.prototype.draw = function(){
      var map = this._map;
      var pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x - 120 + "px";
      this._div.style.top  = pixel.y - 60 + "px";
    }

    //设置柱形的坐标
    var names = new Array();
    names.push("宿迁");
    names.push("徐州");
    names.push("连云港");
    names.push("淮安");
    names.push("盐城");
    names.push("扬州");
    names.push("南京");
    names.push("镇江");
    names.push("常州");
    names.push("泰州");
    names.push("无锡");
    names.push("南通");
    names.push("苏州");
    var positions = new Array();
    positions.push("118.377933, 33.618109");//宿迁
    positions.push("117.274095, 34.223949");//徐州
    positions.push("118.920653, 34.551877");//连云港
    positions.push("119.297798, 33.602715");//淮安
    positions.push("119.932504, 33.464044");//盐城
    positions.push("119.61975, 32.401283");//扬州
    positions.push("118.782673, 31.853319");//南京
    positions.push("119.297798, 31.900417");//镇江
    positions.push("119.389784, 31.365215");//常州
    positions.push("120.162471, 32.06507");//泰州
    positions.push("119.840518, 31.207212");//无锡
    positions.push("120.925958, 32.119888");//南通
    positions.push("120.493622, 31.048943");//苏州
    //获取指定行政区域对应的坐标
    function getEllpisePosition(name){
        for(var i=0;i<names.length;i++){
            if(names[i] == name){
                var pos = positions[i].split(",");
                return new BMap.Point(pos[0],pos[1]);
            }
        }
        return "";
    }

    //创建返回按钮
   /* var pt = new BMap.Point(116.559792, 33.755613);
    var myIcon = new BMap.Icon("img/back.png", new BMap.Size(50,50));
    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    map.addOverlay(marker2);
    marker2.addEventListener("click",function(){
        // window.location.href='j_map_6.html';
        history.go(-1);
    });*/

    // function showInfo(e){
    //     alert(e.point.lng + ", " + e.point.lat);
    // }
    // map.addEventListener("click", showInfo);
    //根据key获取请求字符串中的value
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    //定义一个函数，实现随机生成十六进制颜色值
    function getColor(){
      //定义字符串变量colorValue存放可以构成十六进制颜色值的值
      var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
      //以","为分隔符，将colorValue字符串分割为字符数组["0","1",...,"f"]
      var colorArray = colorValue.split(",");
      var color="#";//定义一个存放十六进制颜色值的字符串变量，先将#存放进去
        //使用for循环语句生成剩余的六位十六进制值
      for(var i=0;i<6;i++){
            //colorArray[Math.floor(Math.random()*16)]随机取出
           // 由16个元素组成的colorArray的某一个值，然后将其加在color中，
           //字符串相加后，得出的仍是字符串
            color+=colorArray[Math.floor(Math.random()*16)];
       }
       return color;
    }

    // 定义一个控件类,即function
    function ZoomControl(){
      // 默认停靠位置和偏移量
      this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
      this.defaultOffset = new BMap.Size(150, 150);
    }

    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();

    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map){
      // 创建一个DOM元素
      var div = document.createElement("div");

      var ImgEle = document.createElement("img");
      ImgEle.src = "img/back.png";
      // 添加文字说明
      div.appendChild(ImgEle);
      // 设置样式
      div.style.cursor = "pointer";
      // 绑定事件
      div.onclick = function(e){
        history.go(-1);
      }
      // 添加DOM元素到地图中
      map.getContainer().appendChild(div);
      // 将DOM元素返回
      return div;
    }
    // 创建控件
    var myZoomCtrl = new ZoomControl();
    // 添加到地图当中
    map.addControl(myZoomCtrl);
</script>
<style>
    .ellipse{
        margin-left: 100px;
        width:30px;
        height:41px;
        border:solid 0.5px black;
        background: deepskyblue;
        border-radius: 24px;
        transform: rotateX(70deg);
    }
    .ellipse:after{
        content: '';
        display:inline-block;
        width:30px;
        height: 140px;
        position:relative;
        opacity: 0.6;
        background: deepskyblue;
        top:50%;
        left:-0.5px;
        border-left:black 0.5px solid;
        border-right:black 0.5px solid;
        border-bottom: black 0.5px solid;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    .backBtn{
        /* position:absolute; */
        width:60px;
        height:34px;
        top:300px;
        left:100px;
        font-size:14px;
        text-align:center;
        padding-top:12px;
        color:white;
        background: deepskyblue;
        border:1px solid blue;
    }
</style>
